{% extends 'main_layout.html' %} 
{% block title %}泊客网 - 小程序{% endblock %} 
{% block subhead %}
  <link rel="stylesheet" href="/css/program.css">
{% endblock %} 
{% block content %}
<h3>小程序，仅供学习之用</h3>
<div class="flex-container">
    <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="./program/shortcut/acc.png" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Acc</h4>
          <h6>Windows客户端</h6>
          <p class="card-text">快速找到你要打开的应用程序。不用为了找到某个程序的启动图标而烦恼，不用在任务栏摆一堆的快捷方式，不用在茫茫桌面寻找文件。</p>
        </div>
        <div class="card-block">
          <a href="https://github.com/tujiaw/Acc" class="card-link">Github</a>
          <a href="./program/download/Acc.zip" class="card-link">下载</a>
        </div>
    </div>
    <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="./program/shortcut/MonitorClipboard.png" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Desktop Monitor</h4>
          <h6>Windows客户端</h6>
          <p class="card-text">一个小巧的应用程序，用来监控剪切板、键盘和鼠标，能看到你近期的一些操作记录，不要用它来干坏事！</p>
        </div>
        <div class="card-block">
          <a href="https://github.com/tujiaw/MonitorClipboard" class="card-link">Github</a>
          <a href="./program/download/MonitorClipboard.exe" class="card-link">下载</a>
        </div>
    </div>
    <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="./program/shortcut/joke.png" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Joke</h4>
          <h6>React native Android App</h6>
          <p class="card-text">集合了笑话大全、来福岛笑话、趣图，偶尔看一看放松一下，每天都有更新，笑话多多。</p>
        </div>
        <div class="card-block">
          <a href="https://github.com/tujiaw/react_native_joke" class="card-link">Github</a>
          <a href="./program/download/joke.apk" class="card-link">下载</a>
        </div>
    </div>
    <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="./program/shortcut/wchathot.png" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title">Wechat hot</h4>
          <h6>React web</h6>
          <p class="card-text">微信文章精选有20个类别，里面有很多不错的文章。受到微信策略的影响一些老的文章链接打开后显示“链接已过期”。</p>
        </div>
        <div class="card-block">
          <a href="https://github.com/tujiaw/react-wchathot" class="card-link">Github</a>
          <a href="http://ningto.com/react-wchathot" class="card-link">浏览</a>
        </div>
    </div>
    <div class="card" style="width: 20rem;">
      <img class="card-img-top" src="./program/shortcut/dzdp.png" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">模拟大众点评</h4>
        <h6>React web</h6>
        <p class="card-text">学习react的时候写的，只是模拟了一小部分功能，使用了redux，react-router，mock数据使用了rapapi等技术。</p>
      </div>
      <div class="card-block">
        <a href="https://github.com/tujiaw/react-dzdp" class="card-link">Github</a>
        <a href="http://ningto.com/react-dzdp" class="card-link">浏览</a>
      </div>
  </div>
  <div class="card" style="width: 20rem;">
    <img class="card-img-top" src="./program/shortcut/color.png" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">拾色器</h4>
      <h6>Windows客户端</h6>
      <p class="card-text">非常实用的小工具，做UI的时候经常会用到，可以放大拾取某个点的颜色，支持颜色格式转换同时又有方便的快捷键操作。</p>
    </div>
    <div class="card-block">
      <a href="https://github.com/tujiaw/Color" class="card-link">Github</a>
      <a href="./program/download/color.zip" class="card-link">下载</a>
    </div>
  </div>
</div>
<!-- flex-container -->
{% endblock %}